import { Tag } from '../../components';
import './style/tag.scss';

const log = (e: React.MouseEvent<HTMLElement>) => {
  console.log(e);
};

const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
  console.log('Clicked! But prevent default.');
};


export default function TagView() {
  return (
    <>
      <h1>Tag View</h1>
      <Tag className={'tag'} selectable={false} onSelect={(value, e) => {alert(value);}}>Default</Tag>
      <Tag className={'tag'} selectable onClose={preventDefault} onSelect={(value, e) => {alert(value);}}>可选择tag</Tag>
      <Tag className={'tag'} closable color={'success'}>success</Tag>
      <Tag className={'tag'} closable color={'info'} size={'large'} onSelect={(value, e) => {alert(value);}}>info</Tag>
      <Tag className={'tag'} color={'error'} disabled>error</Tag>
      <Tag className={'tag'} closable color={'warning'} disabled>warning disabled</Tag>
      <Tag className={'tag'} closable value='通过value prop可以设置事件函数的参数' onClose={(value, e) => {alert(`${value}`);}}>
        close tag
      </Tag>
      <Tag className={'tag'} closable onClose={log} disabled>
        disabled 可关闭tag
      </Tag>
      <Tag className={'tag'} color="#f50">#f50</Tag>
      <Tag className={'tag'} color="#2db7f5">#2db7f5</Tag>
      <Tag className={'tag'} color="#87d068" disabled>#87d068</Tag>
      <Tag className={'tag'} color="#108ee9" closable>#108ee9</Tag>
    </>
  );
}
